(function($){
    $(document).ready(function(){
        var slider          = $('.slider'),
            sliderUL        = $('.slider').children('ul'),
            sliderNav       = $('.slider_nav'),
            imgs            = sliderUL.find('img'),
            imageWidth      = imgs.first().width(),
            imgLen          = imgs.length,
            current         = 1,
            totalImgsWidth  = imageWidth*imgLen;

        //enable navigation
        sliderNav.show();

        //set overflow
        slider.css('overflow','hidden');

        //event handler on nav button
        sliderNav.find('button').bind('click',function(){
            var self = $(this),
                direction = self.data('dir'),
                loc = imageWidth;

            //update current value
            (direction === 'next') ? ++current : --current;

            //if first image
            if(current === 0){
                current = imgLen;
                loc =totalImgsWidth - imageWidth;
                direction = 'next';
            } else if(current - 1 === imgLen){ //last image
                current = 1;
                loc = 0;
            }
            transition(sliderUL,loc,direction);
        });

        function transition(container, loc, direction){
            var unit; //-= or +=

            if(direction && loc !==0){
                unit = (direction === 'next')? '-=' : '+=';
            }

            container.animate({
               'margin-left' : unit ? unit + loc : loc
            });

        }
    });

})(jQuery);